{% extends "admin/base_site.html" %}

{% block extcss %}
<style type="text/css">
/*.prompt-text {
    font-size: 11px;
    color:     #999999;
}*/

input.road_style_h1 { /* 水平方向路名A,B,C */
    width: 120px; height: 30px;
    background-color: #D3E9FF;
    border-radius: 4px; /* 圆角 */
    border: 1px solid #cccccc;
}
input.road_style_h2 { /* 水平方向路名D,E,F */
    margin-left: 80px; width: 120px; height: 30px;
    background-color: #D3E9FF;
    border-radius: 4px;
    border: 1px solid #cccccc;
}

input.road_style_v1 { /* 垂直方向路名G */
    margin-left: 100px; width: 120px; height: 30px;
    background-color: #D3E9FF;
    border-radius: 4px;
    border: 1px solid #cccccc;
}
input.road_style_v2 { /* 垂直方向路名H */
    margin-left: 100px; margin-bottom: 10px; width: 120px; height: 30px;
    background-color: #D3E9FF;
    border-radius: 4px;
    border: 1px solid #cccccc;
}

</style>
{% endblock %}

<!-- <script type="text/javascript" src="{{STATIC_URL}}vision/js/verify.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}vision/js/jquery.cookie.js"></script> -->

{% block extjs %}
<script type="text/javascript">
// $(document).ready(function(){
    // $("#demo_scheme").change(function(){
        // var demo_schemo = $("#demo_scheme").val();
        // if(demo_schemo == 'S') { //静态
            // $("#move_type").hide();
            // $("#velocity_div").hide();
        // } else {//动态
            // $("#move_type").show();
            // $("#velocity_div").show();
        // }
    // }); //end change()
// });

function checkMark(m) {
    var rm = m.toUpperCase();
    if($("#mark_"+m).attr("checked") == "checked") { //已选中时再点击
        $("#"+m+"_pressed").css("background-color","#D3E9FF");
        $("#"+m+"_pressed").val(m.toUpperCase());
        $("#mark_"+m).attr("checked", false);
        $("#"+m+"_as_target").attr("checked", false);  //
    } else {  //未选中时点击
        $("#"+m+"_pressed").css("background-color","#1F90F2");
        $("#mark_"+m).attr("checked", 'checked');
        $("#"+m+"_as_target").attr("checked", 'checked');
    }
}

function saveParams() {
    var demo_scheme = $('#demo_scheme').val();
    var step_scheme = $('#step_scheme').val();
    var move_type =   $("input[name='move_type']:checked").val();
    var wp_scheme =   $('#wp_scheme').val(); //注视点运动模式
    var velocity =    $('#velocity').val();
    
    //var target_road = $('#target_road').val();
    var eccent = $('#eccent').val();
    var init_angle = $('#init_angle').val();
    var road_size = $('#road_size').val();
    var board_size = $('#board_size').val();
    var space_type = $('#space_type').val();  //单路牌时路名间距是否也同比例缩放
    var space_scale_type = $('#space_scale_type').val();  //关键间距过程, 同时缩放或逐一缩放
    var desc = $('#desc').val();
    
    //构造 road_marks参数
    var marks = new Array('a', 'b', 'c', 'd', 'e', 'f', 'g', 'h');
    var road_marks = new Array();
    var target_seats = new Array();
    for(i in marks) {
        if($("#mark_"+marks[i]).attr("checked") == "checked") {
            road_marks.push(marks[i].toUpperCase());  
        }
        if($("#"+marks[i]+"_as_target").attr("checked") == "checked") {
            target_seats.push(marks[i].toUpperCase());
        }
    }
    
    if( road_marks.length < 2 || target_seats.length < 1 ) {
        $("#set_result").css('color', 'red');
        $("#set_result").html('');
        $("#set_result").append('路名数量小于2, 或目标项数量小于1');
        return;           
    }
    road_marks = road_marks.join(",") + "|" + target_seats.join(","); 
    
    if(isNull(eccent)) {
        $("#set_result").css('color', 'red');
        $("#set_result").html('');
        $("#set_result").append('请设置路牌中心距');
        return;
    }        
    
    if(isNull(init_angle)) {
        $("#set_result").css('color', 'red');
        $("#set_result").html('');
        $("#set_result").append('请设置初始角度');
        return;
    }
    
    $.ajax({
        url:        '/admin/vision/set_params',
        type:       "POST",
        dataType:   "json",
        data:      {"board_type":   'S', 
                    "demo_scheme":  demo_scheme, 
                    "step_scheme":  step_scheme, 
                    "move_type":    move_type, 
                    "wp_scheme":    wp_scheme,
                    "velocity":     velocity,
                    "road_marks":   road_marks,
                    "eccent":       eccent,
                    "init_angle":   init_angle,
                    "road_size":    road_size,
                    "board_size":   board_size, 
                    
                    "space_type":   space_type, 
                    "desc":         desc,
        }, 
                    
        success: function(res) {
            console.log(res);
            setResult(res);
        },
        error:  function(e){
            alert("提交异常");
        },
        beforeSend: function(xhr) {
                xhr.setRequestHeader("X-CSRFTOKEN", $.cookie('csrftoken'));
        },
        complete:   function(){},
    });
}

function setResult(res) {
    if(res.code == 1) {
        $("#set_result").css('color', '#009900');
        $("#set_result").html('');
        //$("#set_result").append('参数设置成功');
        window.location.href="/admin/vision/trialparam/";  //跳转到列表页面  
    } else {
        $("#set_result").css('color', 'red');
        $("#set_result").html('');
        $("#set_result").append(res.msg);
    }
    
}
</script>
{% endblock %}

<!-- CONTENT -->
{% block content %}
<div><p><label style="font-size: 25px">单路牌参数</label></p></div>

<div class="tab-content tab-content-main">
    
<form id="params_form" method="post" action="##" class="form-horizontal">    
{% csrf_token %}        

<!--路牌选择--> <!--路牌类型选择已分离, 所以不再需要该选项-->
<!-- <div class="control-group form-row"><div>
    <div class="control-label">
        <label class="required">路牌选择:</label></div>
    <div class="controls">
        <select id="board_type" name="board_type">
            <option value="S" selected="selected">单路牌</option>
            <option value="M">多路牌</option>
        </select></div>
</div></div> -->

<!--实验模式-->
<div class="control-group form-row"><div>
    <div class="control-label">
        <label class="required">实验模式:</label></div>
    <div class="controls">
        <select id="demo_scheme" name="demo_scheme">
            <option value="S" selected="selected">静态</option>
            <option value="D">动态</option>
        </select>&nbsp;&nbsp;
            <div id="move_type" style="display: none;">
            <input name="move_type" type="radio" checked="checked" value="C" />圆周 &nbsp;&nbsp;<!--Circle圆周-->
            <input name="move_type" type="radio" value="S" />平滑 &nbsp;&nbsp;<!--smooth平滑-->
            <!-- <input name="move_type" type="radio" value="M" />混合 &nbsp;&nbsp;   <!--Mixed混合-->
            <!-- <input name="move_type" type="radio" value="O" />MOT &nbsp;&nbsp; --><!--MOT-->
            </div>
    </div>
</div></div>

<!--注视点是否运动-->
<div id="wp_scheme_div" class="control-group form-row" style="display: none;"><div>
    <div class="control-label">
        <label class="required">注视点模式:</label></div>
    <div class="controls">
        <select id="wp_scheme" name="wp_scheme">
            <option value="S" selected="selected">静止不动</option>
            <option value="L">直线运动</option>
        </select>
        <span class="prompt-text">(若注视点运动则为MOT模式. 该选项与运动模式组合使用)</span>
    </div>
</div></div>

<!--速度值-->
<div id="velocity_div" class="control-group form-row" style="display: none;"><div>
    <div class="control-label"><label>速度值:</label></div>
    <div class="controls">
        <input name="velocity" class="vTextField" id="velocity" type="text" value="" placeholder="v1,v2,v3" >
        <span class="prompt-text">(动态模式时需设置该值3个, 各值间以 , 分隔)</span>
    </div>
</div></div> 

<!--阶梯过程-->
<div class="control-group form-row"><div>
    <div class="control-label">
        <label class="required">阶梯过程:</label></div>
    <div class="controls">
        <select id="step_scheme" name="step_scheme">
            <option value="R" selected="selected">关键间距</option>
            <option value="S">尺寸阈值</option>
            <option value="N">数量阈值</option>
            <option value="V">动态敏感度</option>
        </select>
    </div>
</div></div>

<!--关键间距缩放类型-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>关键间距类型:</label></div>
    <div class="controls">
        <select id="space_scale_type" name="space_scale_type">
            <option value="R1" selected="selected">(间距1)同时缩放</option>
            <option value="R2">(间距2)逐一缩放</option>        
        </select>
        <span class="prompt-text">(关键间距阶梯过程时该参数有效, 默认"同时缩放")</span>
    </div>
</div></div>

<!--尺寸阈值过程变化类型-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>尺寸阈值类型:</label></div>
    <div class="controls">
        <select id="space_type" name="space_type">
            <option value="S1" selected="selected">(尺寸1)间距不变</option>
            <option value="S2">(尺寸2)间距缩放</option>        
        </select>
        <span class="prompt-text">(尺寸阈值阶梯过程时该参数有效, 默认"间距不变")</span>
    </div>
</div></div> 

<!--路牌尺寸-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>路牌尺寸:</label></div>
    <div class="controls">
        <select id="board_size" name="board_size">
            <option value="140,100">140*100</option>
            <option value="280,200" selected="selected">280*200</option>
            <option value="420,300">420*300</option>
       </select>            
    </div>
</div></div> 

<!--路名尺寸-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>路名尺寸:</label></div>
    <div class="controls">
        <select id="road_size" name="road_size">
            <option value="11">11</option>
            <option value="15" selected="selected">15</option>
            <option value="20">20</option>        
        </select>
    </div>
</div></div> 

<!--路名数量-->
<!-- <div class="control-group form-row"><div>
    <div class="control-label"><label>路名数量:</label></div>
    <div class="controls">
        <select id="road_num" name="road_num">
            <option value="2" selected="selected">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
    </div>
</div></div> -->
    
<!--路名位置设置-->    
<div class="control-group form-row"><div>
    <div class="control-label"><label>路名位置:<br />(勾选后作为目标项)</label></div>
    <div class="controls">
        <input onclick="checkMark('g');" type="button" value="G" id="g_pressed" class="road_style_v1" />
        <input id="g_as_target" name="g_as_target" type="checkbox"><br />
        
        <input onclick="checkMark('h');" type="button" value="H" id="h_pressed" class="road_style_v2" />
        <input id="h_as_target" name="h_as_target" type="checkbox"><br />
        
        <input onclick="checkMark('a');" type="button" value="A" id="a_pressed" class="road_style_h1" />
        <input id="a_as_target" name="a_as_target" type="checkbox">
        <input onclick="checkMark('d');" type="button" value="D" id="d_pressed" class="road_style_h2" />
        <input id="d_as_target" name="d_as_target" type="checkbox"><br />
        
        <input onclick="checkMark('b');" type="button" value="B" id="b_pressed" class="road_style_h1" />
        <input id="b_as_target" name="b_as_target" type="checkbox" />
        <input onclick="checkMark('e');" type="button" value="E" id="e_pressed" class="road_style_h2" />
        <input id="e_as_target" name="e_as_target" type="checkbox"><br />
        
        <input onclick="checkMark('c');" type="button" value="C" id="c_pressed" class="road_style_h1" />
        <input id="c_as_target" name="c_as_target" type="checkbox">
        <input onclick="checkMark('f');" type="button" value="F" id="f_pressed" class="road_style_h2" />
        <input id="f_as_target" name="f_as_target" type="checkbox"><br />
    
        <div style="display: none;">
            a<input id="mark_a" name="mark_a" type="checkbox" value="A">
            b<input id="mark_b" name="mark_b" type="checkbox" value="B">
            c<input id="mark_c" name="mark_c" type="checkbox" value="C">
            d<input id="mark_d" name="mark_d" type="checkbox" value="D">
            e<input id="mark_e" name="mark_e" type="checkbox" value="E">
            f<input id="mark_f" name="mark_f" type="checkbox" value="F">
            g<input id="mark_g" name="mark_g" type="checkbox" value="G">
            h<input id="mark_h" name="mark_h" type="checkbox" value="H">
        </div>
    </div>
</div></div>   

<!--目标项-->
<!-- <div class="control-group form-row"><div>
    <div class="control-label"><label>目标项:</label></div>
    <div class="controls">
        <select id="target_road" name="target_road">
            <option value="A" selected="selected">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
            <option value="F">F</option>
            <option value="G">G</option>
            <option value="H">H</option>
        </select>
    </div>
</div></div>  -->

<!--路牌中心距-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>路牌中心距:<br />(路牌中心与注视点的距离)</label></div>
    <div class="controls">
        <input name="eccent" class="vTextField" id="eccent" type="text" value="" placeholder="d1,d2,d3" >
        <span class="prompt-text">(最多设置3个值, 各值间以 , 分隔)</span>
    </div>
</div></div>

<!--初始角度-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>初始角度(角度值):</label></div>
    <div class="controls">
        <input name="init_angle" class="vTextField" id="init_angle" type="text" value="" placeholder="a1,a2,a3" >
        <span class="prompt-text">(最多设置3个值, 各值间以 , 分隔)</span>
    </div>
</div></div> 

<!--描述信息-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>描述:</label></div>
    <div class="controls">
        <input name="desc" class="vTextField" id="desc" type="text" value="" placeholder="描述信息" >
    </div>
</div></div> 


<br />
<input onclick="saveParams();" value="保存参数" class="btn btn-success" name="save_params" type="button" />    
&nbsp;&nbsp;<span id="set_result"></span>

</form>
</div>

{% endblock %}
